<template>
	<div id='order-info-submit' @click.stop='goGoodsInfo'>
		<div class='order-img-info'>
			<el-row :gutter='5' style='height:100%;'>
				<el-col style='height:100%' :span='8'>
					<img :src="JSON.parse(val.goodsIconMain)[0]" alt="goods" width='100%' height='100%'>
				</el-col>
				<el-col :span='16' style='position:relative;height:100%;'>
					<h1 class='order-title'>{{val.goodsName}}</h1>
					<!-- <template v-if='val.sPropertyPriceJson'>
						<p style='margin:3px 0;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;'>
							<span style='font-size:12px;color:#999;' v-for="(zhi,index) in JSON.parse(val.sPropertyPriceJson)">
								<span v-for="(guige,key) in zhi" :key='key'>
									{{guige}}
								</span>
							</span>
						</p>
					</template> -->
					<p class='price-count'>
						<span>￥{{money(val.price)}}</span>
						<span class='count'>X {{val.goodsSum}}</span>
					</p>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
import { _money} from "@/comm.js";
export default {
    props: ["val"],
    methods: {
        money(val) {
            return _money(val);
        },
        //去到商品详情
        goGoodsInfo() {
            
        }
    }
};
</script>

<style scoped>
#order-info-submit {
    height: 125px;
    padding: 1rem 1rem 0 1rem;
    background: white;
}
.order-img-info {
    position:relative;
    height: 105px;
    padding-bottom: 20px;
    border-bottom: 1px solid #efefef;
}
.order-title {
    margin-bottom: 5px;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 20px;
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}
.price-count {
    position: absolute;
    bottom: 0;
    font-size: 13px;
    width: 100%;
}
.price-count .count {
    display: inline-block;
    float: right;
    margin-right: 3px;
    font-size: 15px;
}
</style>